<div id="content" class="container_12">
<form action="<?php echo base_url().'account/create'; ?>" method="POST" enctype="multipart/form-data">
    <div class="grid_3">
        <img src="<?php echo base_url().'images/unknown_user.jpg'; ?>" alt="avatar" />
        <input type="file" name="avatar" accept="image/*" class="form-file" />
    </div>
    <div class="grid_9">
        <div class="header-border">
            <?php
            
            echo '<input type="button" value="Add New User" class="silver-button float-right" disabled />';
            echo '<input type="submit" name="add" value="Save New User" class="silver-button float-right" />';
            
            ?>
            <h2>User Management [ New User ]</h2>
        </div>
        <?php
        
        if(isset($_GET['succ'])) {
            echo '
            <div class="success"><img src="'.base_url().'images/success.png" alt="success" class="valign-middle" />
            <span class="valign-middle">
            ';
            switch($_GET['succ']) {
                case 1:
                    echo 'The new account has been saved!';
            }
            echo '
            </span>
            </div><br />';
        } else if(isset($_GET['err'])) {
            echo '
            <div class="error"><img src="'.base_url().'images/error.png" alt="error" class="valign-middle" />
            <span class="valign-middle">
            ';
            switch($_GET['err']) {
                case 1:
                    echo 'Please fill in all required fields!';break;
                case 2:
                    echo 'Failure in confirming the password!';break;
                case 3:
                    echo 'Something went wrong. Please try again.';break;
                case 4:
                    echo 'Invalid image file. Avatar can only be jpg, png, gif!';break;
                case 5:
                    echo 'The username chosen is unavailable!';break;
                case 6:
                    echo 'Username and Password must be between 6-32 characters!';
            }
            echo '
            </span>
            </div><br />';
        }
        ?>
        <fieldset>
        <legend>Account Information</legend>
        <table class="tbl">
            <tr>
                <td class="tbl-td-a align-right"><span>*Username</span></td>
                <td><input type="text" name="username" class="form-input" required /></td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span id="passwordSpan">*Password</span></td>
                <td>
                    <input type="password" name="password" placeholder="Password" id="password" class="form-input" required /><br />
                    <input type="password" name="conPassword" placeholder="Confirm Password" id="conPassword" class="form-input" required />
                </td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Account Role</span></td>
                <td>
                    <select name="role" class="form-select" required>
                    <option value="">--Choose Role--</option>
                    <?php
                    
                    foreach($roles as $role) {
                        echo '<option value="'.$role->role_id.'">'.$role->role_name.'</option>';
                    }
                    
                    ?>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Account Status</span></td>
                <td>
                    <select name="status" class="form-select" required>
                    <option value="">--Choose Status--</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                    </select>
                </td>
            </tr>
        </table>
        </fieldset>
        <br />
        <fieldset>
        <legend>Profile Information</legend>
        <table class="tbl">
            <tr>
                <td class="tbl-td-a align-right"><span>*First Name</span></td>
                <td><input type="text" name="fname" class="form-input" required /></td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Last Name</span></td>
                <td><input type="text" name="lname" class="form-input" required /></td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Gender</span></td>
                <td>
                    <input type="radio" name="gender" value="Male" class="valign-middle" checked /><span class="valign-middle">Male</span>
                    <input type="radio" name="gender" value="Female" class="valign-middle" /><span class="valign-middle">Female</span>
                </td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Birthday</span></td>
                <td><input type="text" name="birthday" class="form-input datepicker" required /></td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>*Address</span></td>
                <td><input type="text" name="address" class="form-input" required /></td>
            </tr>
            <tr>
                <td class="tbl-td-a align-right"><span>About Me</span></td>
                <td><textarea name="about" class="form-input" rows="5"></textarea></td>
            </tr>
        </table>
        </fieldset>
    </div>
</form>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>js/datepicker.js"></script>